<template>
  <el-form :inline="true" class="demo-ruleForm" size="mini">
    <el-row class="search">
      <el-col :span="6">
        <el-form-item label="模块名: ">
          <el-select v-model="groupName" placeholder="选择模块名" style="width: 240px">
            <el-option v-for="item in props.options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button type="primary" @click="add()">添加</el-button>
          <el-button type="primary" @click="reset()">重置</el-button>
        </el-form-item></el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { ref , watch} from 'vue';
import { useRouter } from 'vue-router';
// defineEmits 定义了emit
import { defineEmits } from 'vue';
const emit = defineEmits();

//页面元素绑定组件
const groupName = ref('');
var router = useRouter()
// 接受父组件传过来的值
// 声明 props
const props = defineProps({
  options: {
    type: Array,
  },
  clear: {
        type: Boolean,
      }
});

// 监听 clear 属性的变化
watch(() => props.clear, (newVal) => {
  if (newVal) {
    console.log(props.clear)
    reset();
  }
});

function search() {
  // 触发搜索事件，将搜索条件传递给父组件
  emit('search', groupName.value)
}

//重置
function reset() {
  console.log(props.clear)
  groupName.value = '';
}
//添加
function add() {
  router.push('/additem')
}

</script>

<style lang="scss"></style>